<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/3/23
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <script>
        function show(id, e) {
            document.getElementById("d").style.display = "block";
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let result = xhr.responseText;
                    // console.log(result)
                    let product = eval("(" + result + ")");
                    console.log(product)
                    document.getElementById("d").style.left = e.clientX;
                    document.getElementById("d").style.top = e.clientY;
                    document.getElementById("s1").innerHTML = product.id;
                    document.getElementById("s2").innerHTML = product.name;
                    document.getElementById("s3").innerHTML = product.price;
                }
            };
            xhr.open("get", "${pageContext.request.contextPath}/findById.product?id=" + id);
            xhr.send(null);
        }

        function hide() {
            document.getElementById("d").style.display = "none";
        }
    </script>
</head>
<body>
<!--
    需求一:查询所有商品信息
    此处使用传统web请求,不需要使用Ajax实现
    此处列表中的所有数据均为数据库中t_product表中的数据
    页面中只展现商品名称
-->
<ul>
    <c:forEach items="${products}" var="product">
        <li onmouseover="show(${product.id},event)" onmouseout="hide()">${product.name}</li>
    </c:forEach>
</ul>
<hr/>
<!--
    需求二:展现商品详情
    使用ajax实现该功能
    div默认是隐藏的,只有鼠标悬停在某个用户上的时候
    div出现在鼠标旁边,且div中显示鼠标悬停的用户的详情
    当鼠标离开用户选项的时候,div自动隐藏
-->
<div id="d" style="background-color: #dddddd;width: 200px;padding: 10px;display: none;position: absolute;">
    编号:<span id="s1">1</span><br/>
    商品名称:<span id="s2">aaa</span><br/>
    商品单价:<span id="s3">111</span><br/>
</div>
</body>
</html>